import React from 'react';
import ReactDOM from 'react-dom';

import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
import CmtList from '@/components/CmtList';
import BindEvent from '@/components/BindEvent';
console.log('myfirst webpack appa!');

var strong = React.createElement('strong', { className: 'black' }, 'Black');
var ele = React.createElement('span', { id: 'myH1' }, strong);

ReactDOM.render(ele, document.getElementById('app'));


var myDiv = <div id='myDiv'><span>Parse jsx using babel-loader.</span></div>
ReactDOM.render(myDiv, document.getElementById('app'));


let str = 'gainorloss';
let num=1;
let boo=false;
let arr=['毛利兰','毛利小五郎','柯南','灰原哀'];
ReactDOM.render(<div>
    <h1 title={str}>我的名字是：{str}</h1>
    <hr />
    <h1>我想有{num}栋自己的大楼</h1>
    <hr />
    <h1>我是在做梦吗？{boo?'是':'当然不是'}</h1>
    <hr />
    <h1>arr</h1>
    <hr />
        {/*这里是jsx的注释方式*/}
    <div>《名侦探柯南》中出场的主要人物有:{arr.map(item=>{
        return <span className='myClassName' key={item}>{item}、</span>;
    })}</div>
    <hr/>
    <label htmlFor='forMe'></label>
</div>, document.getElementById('app'));

const dog={
    name:'gainorloss',
    age:26
};


// ReactDOM.render(<HelloWorld name={dog.name} age={dog.age}></HelloWorld>,document.getElementById('app'));
// ReactDOM.render(<HelloWorld {...dog}></HelloWorld>,document.getElementById('app'));
ReactDOM.render(<div><CmtList></CmtList><BindEvent></BindEvent></div>,document.getElementById('app'));
